<template>
    <div class="mainBox">
        <PageHeaderNav :need-underline="false" content="备忘录" :need-back="false"></PageHeaderNav>
        <div class="content">
            <Note class="btnFocus"
                  v-for="note in notes"
                  :id="note.id"
                  :content="note.content"
                  :timeStamp="note.timeStamp"
                  @click="edit"
                  @longPress="longPress"
                  ref="notes"
            />
        </div>
        <el-empty v-if="!notes.length"
                  description="还没有备忘记录噢"></el-empty>
        <div class="btnFocus btnNote addNote"
             ref="addNote"
             @click="addNote"
        >+
        </div>
        <div class="btnFocus btnNote removeNote"
             ref="removeNote"
             @click="removeNote"
             style="display: none"
        >+
        </div>
    </div>
</template>
<script>
import PageHeaderNav from "@/components/Publlic/PageHeaderNav.vue";
import Note from "@/components/Notes/Note.vue";

export default {
    components: {
        PageHeaderNav,
        Note
    },

    data() {
        return {
            selectActive: false,

            notes: []
        }
    },

    methods: {
        // 点击事件
        edit(noteID) {
            // 进入编辑
            this.$router.push("/editNoteView/" + noteID)
        },

        // 长按事件
        longPress() {
            // 把所有的 note 都进入多选状态
            this.$refs.notes.forEach(note => this.$(note.selectActive = true))

            // 变换显示删除按钮
            this.$(this.$refs.addNote).hide()
            this.$(this.$refs.removeNote).show()
        },

        addNote() {
            this.$router.push("/editNoteView")
        },

        removeNote() {
            const removeNoteIdList = this.$refs.notes.filter(note => note.selected).map(note => note.id)
            if (!removeNoteIdList.length) {
                // 把所有的 note 都退出多选状态
                this.$refs.notes.forEach(note => this.$(note.selectActive = false))

                // 变换显示增加按钮
                this.$(this.$refs.removeNote).hide()
                this.$(this.$refs.addNote).show()
                return
            }

            this.$dialog.confirm({
                title: '提示',
                message: '确认删除选择的备忘吗？',
                overlay: false
            }).then(() => {
                this.request.post("/notes/removeNote/", {
                    removeNoteIdList: removeNoteIdList
                }).then((response) => {
                    const status = response["code"] === 200

                    if (status) {
                        setTimeout(() => {
                            location.reload()
                        }, 500)
                    }
                })
            })
        }
    },

    created() {
        this.request.post("/notes/getNoteList/", {}).then((response) => {
            const status = response["code"] === 200

            if (status) {
                // 回写数据
                this.notes = response["data"]["noteList"]
            }
        })
    }
}
</script>

<style lang="less" scoped>
.mainBox {
    height: 88vh;
    overflow-y: scroll;
    position: relative;
    background-color: var(--grayColor);
}

::v-deep .pageHeader {
    background-color: white;
}

.content {
    padding: 15px 20px;
    columns: 2;
    overflow-y: scroll;
}

.btnNote {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    position: fixed;
    bottom: 16vh;
    z-index: 10000;
    right: 8vw;
    font-size: 3rem;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.addNote {
    background-color: var(--color);
    box-shadow: var(--color) 0 0 8px;
}

.removeNote {
    background-color: var(--yellowColor);
    box-shadow: var(--yellowColor) 0 0 8px;
    transform: rotate(45deg);
    animation: removeNote ease-in-out 0.8s;
}

@keyframes removeNote {
    0% {
        background-color: var(--color);
        box-shadow: var(--color) 0 0 8px;
        transform: rotate(0deg);

    }
    100% {
        background-color: var(--yellowColor);
        box-shadow: var(--yellowColor) 0 0 8px;
        transform: rotate(45deg);
    }
}
</style>